<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>抢红包</title>
    <style>
        body,dd,div,dl,dt,h1,h2,h3,h4,h5,h6,img,li,ol,p,ul{margin:0;padding:0;}
        html{overflow: hidden;}
        .pocket{
            width: 3rem;
            height: 4rem;
            background-color: red;
            position: absolute;
            bottom: 0px;
            left: 30%;
        }
    </style>
</head>
<body>
    <span id="record">0</span>
    <script>
        (function(){
            /** 设定font-size */
            var screenWidth = window.screen.width, screenHeiht = window.screen.height;
            var fontSize = screenWidth/7.5 > 128 ? 128 : screenWidth/7.5;
            document.getElementsByTagName('html')[0].style.cssText = 'font-size:'+fontSize+'px';
            /** 
             * 取消原生触碰事件
             * 不使用{passive:true},是因为safari等的兼容问题,所以只好忽略高版本chrome的警告
             * https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
             **/
            window.addEventListener('touchstart',function(e){e.preventDefault();});
            /** 初始化参数 */
            var startX, startY, moveX, moveY;
            var id = 0;
            /** 新建红包 */
            newPocket(id);
            //插入新红包
            function newPocket(id){
                var div = document.createElement("div");
                div.id = 'pocket_'+id;
                div.className = 'pocket';
                document.body.appendChild(div);
                var pocket = document.getElementById('pocket_'+id);
                // 触碰开始
                pocket.addEventListener('touchstart',function(e){
                    startX = e.touches[0].screenX;
                    startY = e.touches[0].screenY;
                })
                // 触碰过程
                pocket.addEventListener('touchmove',function(e){
                    moveX = e.touches[0].screenX - startX;
                    moveY = e.touches[0].screenY - startY;
                    //转换回rem
                    pocket.style.cssText = 'transform:translate('+pxToRem(moveX)+'rem,'+pxToRem(moveY)+'rem)';
                })
                // 触碰结束
                pocket.addEventListener('touchend',function(e){
                    var vaild = -moveY >= screenHeiht/2.2;
                    if(!vaild){
                        pocket.style.cssText = 'transform:translate(0rem,0rem);transition-duration:200ms';
                    }else{
                        var stop = false;
                        while(!stop){
                            stop = -moveY > screenHeiht;
                            moveX = moveX > 0 ? moveX + .3 : moveX - .3;
                            moveY -= 1;
                            pocket.style.cssText = 'transform:translate('+pxToRem(moveX)+'rem,'+pxToRem(moveY)+'rem);transition-duration:300ms';
                        }
                        setTimeout(function(){pocket.remove()},300)
                        id += 1;
                        newPocket(id);
                        document.getElementById('record').innerHTML = id;
                    }
                })
            }
            //px转换rem单位
            function pxToRem(px){
                return px/50;
            }
        })()
    </script>
</body>
</html>